<template>
    <div id="profitstat" style="width: 100%;height:350px;" />
</template>

<script>
import { getDailyProfitStat } from '@/api'
import { timeFormat } from "@/util"

export default {
    name: "DailyProfitStat",

    mounted() {
        this.init()
    },

    methods: {
        init() {
            getDailyProfitStat
                .request()
                .then(({ data }) => {
                    const time = []
                    const purchase = []
                    const sell = []
                    const profit = []
                    data.data.forEach(i => {
                        time.push(timeFormat('MM 月 dd日', new Date(i.time)))
                        purchase.push(i.purchase)
                        sell.push(i.sell)
                        profit.push(i.profit)
                    })
                    this.setOptions({ time, purchase, sell, profit })
                })
        },

        setOptions({ time, purchase, sell, profit }) {
            const my = this.$echarts.init(document.getElementById('profitstat'))
            my.setOption({
                title: {
                    text: '历史利润情况统计',
                    left: 'center',
                    align: 'right',
                    textStyle: {
                        color: '#00eeff',  // 图例文字的颜色
                    },
                },
                xAxis: {
                    data: time,
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#7edae8',  //坐标的字体颜色
                        },
                    },
                },
                grid: {
                    left: 10,
                    right: 10,
                    bottom: 20,
                    top: 30,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    padding: [5, 10],

                },
                yAxis: {
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#7edae8',  //坐标的字体颜色
                        },
                    },
                },
                legend: {
                    data: ['采购额', '销售额', '毛利润'],
                    right: 10,
                    textStyle: {
                        color: '#00eeff',  // 图例文字的颜色
                    },
                },
                series: [
                    {
                        name: '采购额',
                        smooth: true,
                        type: 'line',
                        data: purchase,
                        markPoint: {
                            data: [
                                {
                                    type: 'max',
                                    name: '最大值'
                                },

                                {
                                    type: 'min',
                                    name: '最小值'
                                }
                            ]
                        }
                    },
                    {
                        name: '销售额',
                        smooth: true,
                        type: 'line',
                        data: sell,
                        markPoint: {
                            data: [
                                {
                                    type: 'max',
                                    name: '最大值'
                                },
                                {
                                    type: 'min',
                                    name: '最小值'
                                }
                            ]
                        }
                    },
                    {
                        name: '毛利润',
                        smooth: true,
                        type: 'line',
                        data: profit,
                        markPoint: {
                            data: [
                                {
                                    type: 'max',
                                    name: '最大值'
                                },
                                {
                                    type: 'min',
                                    name: '最小值'
                                }
                            ]
                        }
                    }
                ]
            })
        }
    }
}
</script>
